<template>
  <div class='count'>
    <h1 ref="countEle">{{count}}</h1>
    <button @click='add'>累加</button>
    <button @click="getEle">点击获取ref</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    data(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count++
        },
        getEle(){
            // 在组件实例上有一个$ref属性，是一个对象，对象中保存的是在模板中书写的ref属性的元素
            //  - 通过this.$refs.xxx获取，得到的是一个真实DOM
            console.log(this);
            console.log(this.$refs.countEle);
        }
    }
};
</script>

<style>
.count{
    background-color: aquamarine;
    height: 300px;
}
</style>